<template>
	<view class="item" @click="toDetail">
		<view class="companyInfo u-border-bottom">
			<view class="companyImg">
				<image class="img" :src="item.logo_src"></image>
			</view>
			<view class="infoDes">
				<view class="name">
					<view :class=" item.clicked ? 'text ac substring' : 'text substring'">{{item.companyname}}</view>
					<text class="audit" v-if="item.company_audit == 1">认证</text>
					<image class="icon" :src="item.setmeal_icon" v-if="item.setmeal_icon"></image>
				</view>
				<view class="other">
					<text class="otherItem color1 substring" v-if="item.district_text">{{item.district_text}}</text>
					<text class="otherItem color2 substring" v-if="item.scale_text">{{item.scale_text}}</text>
					<text class="otherItem color3 substring" v-if="item.trade_text">{{item.trade_text}}</text>
					<!-- <text class="item" v-if="item.nature_text">{{item.nature_text}}</text> -->
				</view>
			</view>
		</view>
		<view :class="item.clicked ? 'job ac overflow' : 'job overflow'">
			<view class="jobText substring">
				<text class="color1">{{item.jobnum}}</text>个职位在招：<text
					class="color2">{{item.job_list | jobName}}</text><text v-if="item.jobnum>2">等</text>
			</view>
			<view class="icon">
				<view class="arrowRight"></view>
			</view>
		</view>
		<!-- <view class="companyTag" v-if="item.tag_text_arr.length>0">
			<view class="tag" v-for="(tagItem,index) in item.tag_text_arr" :key="index">{{tagItem}}</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		props: ['item'],
		filters: {
			jobName(jobList) {
				var str = []
				if (jobList) {
					if (jobList.length > 2) {
						str = jobList[0].jobname + '、' + jobList[1].jobname
						return str
					} else {
						str = jobList.map(item => item.jobname)
						return str.join('、')
					}
				}
			}
		},
		methods: {
			toDetail(id) {
				this.$emit('toDetail', this.item.id)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.item {
		background: #fff;
		margin-bottom: 18rpx;
		border-radius: 14rpx;

		.companyInfo {
			display: flex;
			padding: 24rpx 26rpx;
			align-items: center;

			&::after {
				border-color: #F2F2F2;
			}

			.companyImg {
				width: 90rpx;
				height: 90rpx;
				margin-right: 20rpx;
				border-radius: 6rpx;
				border: 1rpx solid #f2f2f2;
				margin-top: 4rpx;

				.img {
					width: 100%;
					height: 100%;
					display: block;
					border-radius: 6rpx;
				}
			}

			.infoDes {
				width: calc(100% - 110rpx);

				.name {
					color: #2A2A2A;
					font-size: 36rpx;
					font-weight: 700;
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;

					.text {
						flex-shrink: 0;
						max-width: 380rpx;

						&.ac {
							color: #797979;
						}
					}

					.audit {
						font-weight: normal;
						color: #18C373;
						font-size: 22rpx;
						background: #E9FFF5;
						border: 1rpx solid #18C373;
						border-radius: 6rpx;
						padding: 2rpx 10rpx 1rpx;
						margin-left: 15rpx;
					}

					.icon {
						width: 40rpx;
						height: 40rpx;
						margin-left: 10rpx;
					}
				}

				.other {
					position: relative;
					font-size: 0;
					white-space: nowrap;
					overflow: hidden;

					.otherItem {
						font-size: 28rpx;
						margin-right: 10rpx;
						border-radius: 6rpx;
						text-align: center;
						padding: 4rpx 18rpx;
						display: inline-block;
						color: #2263E9;
						font-size: 24rpx;
						background: #F3F6FD;

						&.color1 {
							color: #FF9D54;
							background: rgba(255, 157, 84, 0.08);
						}

						&.color2 {
							color: #AE79FF;
							background: rgba(174, 121, 255, 0.08);
						}

						&.color3 {
							color: #74CEA9;
							background: rgba(116, 206, 169, 0.08);
						}
					}
				}

			}
		}

		.job {
			padding: 24rpx 28rpx 26rpx;
			display: flex;
			justify-content: space-between;

			&.ac {
				color: #797979 !important;
			}

			.jobText {
				color: #2A2A2A;
				font-size: 28rpx;
				flex-shrink: 0;
				width: 550rpx;

				.color1 {
					color: #FC6502;
				}

				.color2 {
					color: #999999;
				}
			}

			.icon {
				display: flex;
				align-items: center;
				justify-content: center;

				.arrowRight {
					width: 30rpx;
					position: relative;

					&::after {
						position: absolute;
						right: 4rpx;
						top: 50%;
						width: 15rpx;
						height: 15rpx;
						margin-top: -6rpx;
						border-top: 2rpx solid #797979;
						border-right: 2rpx solid #797979;
						transform: rotate(45deg);
						content: " ";
					}
				}
			}
		}

		.companyTag {
			display: flex;
			padding: 22rpx 28rpx 25rpx;
			border-top: 1rpx solid #F2F2F2;
			overflow: hidden;

			.tag {
				flex-shrink: 0;
				font-size: 24rpx;
				color: #8A8A8A;
				background: rgba(150, 150, 150, .06);
				padding: 10rpx 18rpx;
				border-radius: 4rpx;
				margin-right: 12rpx;
			}
		}
	}
</style>